<template>
  <div class="basicsInfo">
    <!-- <p>
      <span>商品图片:
        <img
          src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
          alt=""
        >
      </span>
    </p>
    <p>
      <span>商品轮播图:</span>
      <img
        src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2020621817,2408210872&fm=26&gp=0.jpg"
        alt=""
      >
      <img
          src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
          alt=""
        >
    </p>
    <p>
      <span>拼团名称:<el-input placeholder="【现货发顺丰 6期免息】vivo X60 新品拍照智能手机" /></span>
    </p>
    <p>
      <span>拼团简介:<el-input placeholder="【现货发顺丰 6期免息】vivo X60 新品拍照智能手机" /></span>
    </p>
    <p>
      <span>单位:<el-input placeholder="件" /></span>
    </p>
    <p>
      活动日期:
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
    </p>
    <p>
      拼团实效(单位 小时):<el-input-number
        v-model="num"
        :min="1"
        :max="4"
        label="描述文字"
        @change="handleChange"
      />
    </p>
    <p>
      拼团人数:<el-input-number
        v-model="num1"
        :min="1"
        :max="4"
        label="描述文字"
        @change="handleChange"
      />
    </p>
    <p>
      购买数量限制:<el-input-number
        v-model="num2"
        :min="1"
        :max="4"
        label="描述文字"
        @change="handleChange"
      />
    </p>
    <p>
      排序:<el-input-number
        v-model="num3"
        :min="1"
        :max="4"
        label="描述文字"
        @change="handleChange"
      />
    </p>
    <p>
      运费模板:
      <select
        id=""
        name=""
      >
        <option value="请选择">
          请选择
        </option>
        <option value="包邮">
          包邮
        </option>
        <option value="不包邮">
          不包邮
        </option>
      </select>
    </p>
    <p>
      活动状态:
      <span><input type="radio">关闭</span>
      <span><input type="radio">开启</span>
    </p>
    <p class="table">
      商品属性:
      <table
        border="1"
        style="border-collapse: collapse;"
        width='auto'
      >
        <tr>
          <th>选择</th>
          <th>机身颜色</th>
          <th>套餐类型</th>
          <th>存储容量</th>
          <th>版本类型</th>
          <th>图片</th>
          <th>拼团价</th>
          <th>原价</th>
          <th>库存</th>
          <th>限量</th>
          <th>重量</th>
          <th>体积</th>
          <th>商品编号</th>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>灰色</td>
          <td>套餐一</td>
          <td>12+256G</td>
          <td>苹果</td>
          <td>
            <img
              src="/shop-admin/src/assets/basics/images/xiao_03.jpg"
              alt=""
            >
          </td>
          <td>
            <el-input-number
              v-model="num"
              :min="1"
              :max="10"
              label="描述文字"
              @change="handleChange"
            />
          </td>
          <td>40</td>
          <td>21</td>
          <td>
            <el-input-number
              v-model="num1"
              :min="1"
              :max="10"
              label="描述文字"
              @change="handleChange"
            />
          </td>
          <td>重量</td>
          <td>体积</td>
          <td>商品编号</td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>蓝色</td>
          <td>套餐二</td>
          <td>12+256G</td>
          <td>苹果</td>
          <td>
            <img
              src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
              alt=""
            >
          </td>
          <td>
            <el-input-number
              v-model="num2"
              :min="1"
              :max="10"
              label="描述文字"
              @change="handleChange"
            />
          </td>
          <td>40</td>
          <td>21</td>
          <td>
            <el-input-number
              v-model="num3"
              :min="1"
              :max="10"
              label="描述文字"
              @change="handleChange"
            />
          </td>
          <td>重量</td>
          <td>体积</td>
          <td>商品编号</td>
        </tr>
      </table>
    </p> -->
    
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品图片">
        <img
          src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
          alt=""
        >
      </el-form-item>
      <el-form-item label="商品轮播图">
        <img
          src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
          alt=""
        >
      </el-form-item>
      <el-form-item
        label="拼团名称"
        prop="name"
      >
        <el-input
          v-model="ruleForm.name"
          placeholder="【现货发顺丰，6期免息】"
        />
      </el-form-item>
      <el-form-item
        label="拼团简介"
        prop="region"
      >
        <el-input
          v-model="ruleForm.region"
          placeholder="【现货发顺丰，6期免息】"
        />
      </el-form-item>
      <el-form-item
        label="单位"
        prop="name1"
      >
        <el-input
          v-model="ruleForm.name1"
          placeholder="件"
        />
      </el-form-item>
      <el-form-item
        label="活动日期"
        required
      >
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col
          class="line"
          :span="2"
        >
          -
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
              v-model="ruleForm.date2"
              placeholder="选择时间"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item
        label="拼团实效（单位 小时）"
        prop="starnum"
      >
        <el-input-number
          v-model="starnum"
          :min="1"
          :max="4"
          label="描述文字"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item
        label="拼团人数"
        prop="nonum"
      >
        <el-input-number
          v-model="nonum"
          :min="1"
          :max="4"
          label="描述文字"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item
        label="购买数量限制"
        prop="sortnum"
      >
        <el-input-number
          v-model="sortnum"
          :min="1"
          :max="4"
          label="描述文字"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item
        label="排序"
        props="num"
      >
        <el-input-number
          v-model="num"
          :min="1"
          :max="4"
          label="描述文字"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="运费模板">
        <el-select
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="活动状态"
        prop="resource"
      >
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="关闭" />
          <el-radio label="开启" />
        </el-radio-group>
      </el-form-item>
 
      <el-form-item
        label="商品属性"
        class="table"
      >
        <table
          border="1"
          style="border-collapse: collapse;"
          width="auto"
        >
          <tr>
            <th>选择</th>
            <th>机身颜色</th>
            <th>套餐类型</th>
            <th>存储容量</th>
            <th>版本类型</th>
            <th>图片</th>
            <th>拼团价</th>
            <th>原价</th>
            <th>库存</th>
            <th>限量</th>
            <th>重量</th>
            <th>体积</th>
            <th>商品编号</th>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>灰色</td>
            <td>套餐一</td>
            <td>12+256G</td>
            <td>苹果</td>
            <td>
              <img
                src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
                alt=""
              >
            </td>
            <td>
              <el-input-number
                v-model="num"
                :min="1"
                :max="10"
                label="描述文字"
                @change="handleChange"
              />
            </td>
            <td>40</td>
            <td>21</td>
            <td>
              <el-input-number
                v-model="num1"
                :min="1"
                :max="10"
                label="描述文字"
                @change="handleChange"
              />
            </td>
            <td>重量</td>
            <td>体积</td>
            <td>商品编号</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>蓝色</td>
            <td>套餐二</td>
            <td>12+256G</td>
            <td>苹果</td>
            <td>
              <img
                src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3758616094,217032655&fm=26&gp=0.jpg"
                alt=""
              >
            </td>
            <td>
              <el-input-number
                v-model="num2"
                :min="1"
                :max="10"
                label="描述文字"
                @change="handleChange"
              />
            </td>
            <td>40</td>
            <td>21</td>
            <td>
              <el-input-number
                v-model="num3"
                :min="1"
                :max="10"
                label="描述文字"
                @change="handleChange"
              />
            </td>
            <td>重量</td>
            <td>体积</td>
            <td>商品编号</td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >
          立即创建
        </el-button>
        <el-button @click="resetForm('ruleForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      starnum: 1,
      nonum: 1,
      sortnum: 1,
       num: 2,
       num1:2,
       num2:2,
       num3:2,
       value2:'',
       options: [{
          value: '选项1',
          label: '关闭'
        }, {
          value: '选项2',
          label: '打开'
        }],
        value: '',
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        ruleForm: {
          name: '',
          region: '',
          name1:'',
          date1: '',
          date2: '',
          delivery: '',
          // type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          name1: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 2, message: '长度在 1 到 2个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          // type: [
          //   {  required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          // ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
    };
  },
  methods: {
     handleChange(value) {
        console.log(value);
      },
     validate() {
      if (this.sortnum > 1 && this.nonum > 1 && this.starnum > 1) {
        return true;
      } else {
        return false;
      }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
};
</script>
<style lang="scss" scoped>
.basicsInfo {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  padding: 60px 30px;
    img{
      width: 50px;
      height: 3.125rem;
      margin-right: .625rem;
    }
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
  .demo-ruleForm{
    table{
      height:200px;
    }
  }
  
}

</style>
